﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>
    <meta charset="utf-8">
    <title>btable</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    
	<!-- bootstrap -->
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<script src="js/bootstrap.min.js"></script>

	<script type="text/javascript" src="plugins/layui/layui.js"></script>
    <link rel="stylesheet" href="plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/btable.css" />

    <script type="text/javascript">
    	var totalRecord,currentPage;
	    $(function(){
			//去首页
			to_page(1);
			alert("请确保自己的个人信息填写完善，否则无法租车"); 
		});
    	
	    function to_page(pn){
			$.ajax({
				url:"zulin.do",
				typt:"GET",
				data:"pn="+pn,
				success:function(data){
					/* 在网页F12Network中查看 */
					//console.log(data);
					//1、解析并显示员工数据
					build_emps_table(data);
					//2、解析并显示分页信息
					build_page_info(data);
					//3、解析显示分页条数据
					build_page_nav(data);
				}
			})
	    }
		function build_emps_table(data){
			//清空table表格
			$("#car_table tbody").empty();
			var emps = data.list;
			$.each(emps,function(index,item){
				var cid=$("<td></td>").append(item.cid);
				var cname=$("<td></td>").append(item.cname);
				var ccard=$("<td></td>").append(item.ccard);
				var cmoney=$("<td></td>").append(item.cmoney);
				var cstate=$("<td></td>").append(item.cstate);
				var can=item.msg1;
				if(can=="ok"){
					if(item.cstate=="空闲"){
						var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
						.append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("租&nbsp;&nbsp;&nbsp;赁");
						//为编辑按钮添加一个自定义的属性，来表示当前员工id
						editBtn.attr('id',"edit"+item.cid);
						var btnTd = $("<td></td>").append(editBtn);
					}else if(item.cstate=="已出租"){
						var editBtn = $("<button disabled='disabled'></button>").addClass("btn btn-warning btn-sm edit_btn")
						.append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("已出租");
						var btnTd = $("<td></td>").append(editBtn);
					}else{
						var editBtn = $("<button disabled='disabled'></button>").addClass("btn btn-danger btn-sm edit_btn")
						.append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("维护中");
						var btnTd = $("<td></td>").append(editBtn);
					}
				}else{
					if(item.cstate=="空闲"){
						var editBtn = $("<button disabled='disabled'></button>").addClass("btn btn-primary btn-sm edit_btn")
						.append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("租&nbsp;&nbsp;&nbsp;赁");
						//为编辑按钮添加一个自定义的属性，来表示当前员工id
						editBtn.attr('id',"edit"+item.cid);
						var btnTd = $("<td></td>").append(editBtn);
					}else if(item.cstate=="已出租"){
						var editBtn = $("<button disabled='disabled'></button>").addClass("btn btn-warning btn-sm edit_btn")
						.append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("已出租");
						var btnTd = $("<td></td>").append(editBtn);
					}else{
						var editBtn = $("<button disabled='disabled'></button>").addClass("btn btn-danger btn-sm edit_btn")
						.append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("维护中");
						var btnTd = $("<td></td>").append(editBtn);
					}
				}
				
				//var delBtn = 
				//append方法执行完成以后还是返回原来的元素
				$("<tr></tr>")
					.append(cid)
					.append(cname)
					.append(ccard)
					.append(cmoney)
					.append(cstate)
					.append(btnTd)
					.appendTo("#car_table tbody");
				//租赁汽车
				$("#edit"+item.cid).click(function(){
					//弹出窗 
					var cid=item.cid;
					selcarById(cid);
					reset_form("#car_upd form"); 
					$("#car_upd").modal({
						backdrop:"static"
					});
					
					//修改
					$("#carupd").click(function(){
						var otime=$("#otime").val();
						var cname=item.cname;
						var ccard=item.ccard;
						var cmoney=item.cmoney;
						var cid=item.cid
						$("#carupd").attr("value",item.cid);
						$.ajax({
							url:"insertDing.do",
							type:"POST",
							data:{
								otime:otime,
								cname:cname,
								ccard:ccard,
								cmoney:cmoney,
								cid:cid
							},
							success:function(data){
								if(data=="0"){
									alert("您已租赁一辆车了，请先归还之后，才能再次租赁！");
								}else if(data=="1"){
									alert("租车成功！");
								}else{
									alert("账户余额不足，请充值！");
								}
								//1、模态框隐藏
								$("#car_upd").modal("hide");
								//2、回到本页面
								to_page(currentPage);
							}
						});
					}); 

				});
				//回显
				function selcarById(cid){
					$.ajax({
						url:"zuselectbyid.do",
						type:"GET",
						/* 后台得到数据拼接方式  */
						data:"cid="+cid,
						success:function(data){
							$("#cid2").attr("placeholder",data.cid);
							$("#cname2").attr("placeholder",data.cname);
							$("#ccard2").attr("placeholder",data.ccard);
							$("#cmoney2").attr("placeholder",data.cmoney);
						}	
					});
					
				}
			});
		}
		//解析显示分页信息
		function build_page_info(result){
			$("#page_info_area").empty();
			$("#page_info_area").append("当前"+result.pageNum+"页,总"+
					result.pages+"页,总"+
					result.total+"条记录");
			totalRecord = result.total;
			currentPage = result.pageNum;
		}
		//解析显示分页条，点击分页要能去下一页....
		function build_page_nav(result){
			//page_nav_area
			$("#page_nav_area").empty();
			var ul = $("<ul></ul>").addClass("pagination");
			
			//构建元素
			var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
			var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
			if(result.hasPreviousPage == false){
				firstPageLi.addClass("disabled");
				prePageLi.addClass("disabled");
			}else{
				//为元素添加点击翻页的事件
				firstPageLi.click(function(){
					to_page(1);
				});
				prePageLi.click(function(){
					to_page(result.pageNum -1);
				});
			}
			
			
			
			var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
			var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
			if(result.hasNextPage == false){
				nextPageLi.addClass("disabled");
				lastPageLi.addClass("disabled");
			}else{
				nextPageLi.click(function(){
					to_page(result.pageNum +1);
				});
				lastPageLi.click(function(){
					to_page(result.pages);
				});
			}
			//添加首页和前一页 的提示
			ul.append(firstPageLi).append(prePageLi);
			//1,2，3遍历给ul中添加页码提示
			$.each(result.navigatepageNums,function(index,item){
				
				var numLi = $("<li></li>").append($("<a></a>").append(item));
				if(result.pageNum == item){
					numLi.addClass("active");
				}
				numLi.click(function(){
					to_page(item);
				});
				ul.append(numLi);
			});
			//添加下一页和末页 的提示
			ul.append(nextPageLi).append(lastPageLi);
			
			//把ul加入到nav
			var navEle = $("<nav></nav>").append(ul);
			navEle.appendTo("#page_nav_area");
		}
		
		//清空表单样式及内容
		function reset_form(ele){
			$(ele)[0].reset();
			//清空表单样式
			$(ele).find("*").removeClass("has-error has-success");
			$(ele).find(".help-block").text("");
		}
	</script>
</head>

<body style=" background-color: gainsboro;">

    <div style="margin:0px; background-color: white; margin:0 10px;">
        <div id="content" style="width: 100%;height: 533px;">
        	<!-- 内容 -->
	        <div class="row">
				<div class="col-md-4 col-md-offset-8"></div>
			</div>
			<!-- 显示表格数据 -->
			<div class="row">
				<div class="col-md-12">
					<table class="table table-hover" id="car_table">
						<thead>
							<tr>
								<th>车辆ID</th>
								<th>车辆名称</th>
								<th>车辆牌号</th>
								<th>车辆收费标准（/天）</th>
								<th>状态</th>
								<th align="center" colspan="2">操作</th>
								
							</tr>
						</thead>
						<tbody>
						<!-- 车辆信息 -->
						</tbody>
						
						
					</table>
				</div>
			</div>
			<!-- 显示分页信息 -->
			<div class="row">
				<!--分页文字信息  -->
				<div class="col-md-6" id="page_info_area"></div>
				<!-- 分页条信息 -->
				<div class="col-md-6" id="page_nav_area"></div>
			</div>
        </div>
    </div>
    
    
   <!-- 弹出框 -->
	<div class="modal fade" id="car_upd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<!-- 美化表单 -->
	<form class="form-horizontal" >
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="myModalLabel">租赁汽车</h4>
	      </div>
	      <div class="modal-body">
	        
	        
			  <div class="form-group">
			    <label class="col-sm-2 control-label">汽车名称</label>
			    <div class="col-sm-9">
			      <input type="text" name="cname" readonly="readonly" id="cname2" class="form-control"  />
			      <input type="hidden" name="cid" id="cid2" class="form-control"  />
			    </div>
			  </div>
			  
			  <div class="form-group">
			    <label class="col-sm-2 control-label">汽车牌号</label>
			    <div class="col-sm-9">
			      <input type="text" name="ccard" readonly="readonly" id="ccard2" class="form-control"  />
			    </div>
			  </div>
			  
			  <div class="form-group">
			    <label class="col-sm-2 control-label">收费标准(/天)</label>
			    <div class="col-sm-9">
					<input type="text" name="cmoney" readonly="readonly" id="cmoney2" class="form-control" />
					
			    </div>
			  </div>
			  <div class="form-group">
			    <label class="col-sm-2 control-label">租赁时长</label>
			    <div class="col-sm-9">
					<select class="form-control" name="otime" id="otime">
						<option value="1">一天</option>
						<option value="2">两天</option>
						<option value="3">三天</option>
						<option value="7">一星期</option>
						<option value="30">一个月（30天）</option>
					</select>
			    </div>
			  </div>

	
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">退出</button>
	        <button type="button" id="carupd" class="btn btn-primary">租赁</button>
	      </div>
	    </div>
	  </div>
	  </form>
	</div>

</body>

</html>